<template>
  <div>
    <div class="card bg-white my-3 px-4">
      <div class=" d-flex ai-center pt-3 px-1 mb-3"
        :class="{'border-bottom':!plain,'pb-3':!plain }"
      >
        <i class="iconfont" :class="`icon-${icon}`"></i>
        <div class="fs-xl card-title flex-1 ml-2">{{title}}</div>
        <a href>
          <i v-if="!plain" class="iconfont icon-more2 fs-xxxl"></i>
        </a>
      </div>
      <div class="card-body pb-3">
          <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    plain: { type: Boolean}
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
</style>